<template>
  <!-- 底部导航 -->
  <div class="nav-bot">
    <div class="linear"></div>
    <ul>
      <li>
        <router-link :to="{ path: '/frontPage/frontPage' }">首页</router-link>
      </li>
      <li>
        <router-link :to="{ path: '/frontPage/winery' }">关于我们</router-link>
      </li>
      <li>
        <router-link :to="{ path: '/product/Product' }">产品展示</router-link>
      </li>
      <li>
        <router-link :to="{ path: '/microvision/Microvision' }"
          >微短视频</router-link
        >
      </li>
      <li>
        <router-link :to="{ path: '/sealtheAltar/SealtheAltar' }"
          >封坛/定制</router-link
        >
      </li>
      <li>
        <router-link :to="{ path: '/frontPage/winery' }">加盟网点</router-link>
      </li>
      <li>
        <router-link :to="{ path: '/News' }">新闻中心</router-link>
      </li>
    </ul>
    <div class="bah">
      Copyright © 2018 Gxdanquan.cn All Rights Reserved 燕台山酒庄
      桂ICP备120XXXXXX号-4
    </div>
  </div>
</template>

<script>
export default {
  name: "bottomNav",
};
</script>

<style lang="less" scoped>
// 底部导航样式
@media screen and (min-width: 1029px) {
  .nav-bot {
    width: 100%;
    // position: absolute;
    // left: 50%;
    // bottom: 85px;
    // margin-left: -307px;
    color: #000000;
    .linear {
      width: 100%;
      margin-bottom: 20px;
      height: 2px;
      background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 10%,
        rgba(204, 70, 69, 0.3) 20%,
        rgba(204, 70, 69, 0.4) 30%,
        rgba(204, 70, 69, 0.5) 40%,
        rgba(204, 70, 69, 0.8) 50%,
        rgba(204, 70, 69, 0.5) 60%,
        rgba(204, 70, 69, 0.4) 70%,
        rgba(204, 70, 69, 0.3) 80%,
        rgba(0, 0, 0, 0) 90%,
        rgba(0, 0, 0, 0) 100%
      );
    }
    ul {
      display: flex;
      justify-content: center;
      li {
        font-size: 18px;
        margin: 20px 10px;
        a:hover {
          color: #ce1113;
        }
      }
    }
  }
}
@media only screen and (min-width: 750px) and (max-width: 1028px) {
  .nav-bot {
    width: 100%;
    // position: absolute;
    // left: 50%;
    // bottom: 85px;
    // margin-left: -307px;
    color: #000000;
    .linear {
      width: 100%;
      margin-bottom: 20px;
      height: 2px;
      background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 10%,
        rgba(204, 70, 69, 0.3) 20%,
        rgba(204, 70, 69, 0.4) 30%,
        rgba(204, 70, 69, 0.5) 40%,
        rgba(204, 70, 69, 0.8) 50%,
        rgba(204, 70, 69, 0.5) 60%,
        rgba(204, 70, 69, 0.4) 70%,
        rgba(204, 70, 69, 0.3) 80%,
        rgba(0, 0, 0, 0) 90%,
        rgba(0, 0, 0, 0) 100%
      );
    }
    ul {
      display: flex;
      justify-content: center;
      li {
        font-size: 18px;
        margin: 20px 10px;
        a:hover {
          color: #ce1113;
        }
      }
    }
  }
}
@media screen and (max-width: 749px) {
  .nav-bot {
    width: 100%;
    // position: absolute;
    // left: 50%;
    // bottom: 85px;
    // margin-left: -307px;
    color: #000000;
    .linear {
      width: 100%;
      margin-bottom: 20px;
      height: 2px;
      background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 10%,
        rgba(204, 70, 69, 0.3) 20%,
        rgba(204, 70, 69, 0.4) 30%,
        rgba(204, 70, 69, 0.5) 40%,
        rgba(204, 70, 69, 0.8) 50%,
        rgba(204, 70, 69, 0.5) 60%,
        rgba(204, 70, 69, 0.4) 70%,
        rgba(204, 70, 69, 0.3) 80%,
        rgba(0, 0, 0, 0) 90%,
        rgba(0, 0, 0, 0) 100%
      );
    }
    ul {
      width: 50%;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      display: none;
      li {
        width: 30%;
        font-size: 12px;
        margin: 0px 10px;
        a:hover {
          color: #ce1113;
        }
      }
    }
    .bah {
      font-size: 12px;
    }
  }
}
</style>

